<template>
  <div class="sidebar" :style="style">
    <router-link to="/" class="sidebar_logo_box">
      <img src="@/assets/logo.png" class="sidebar_logo" alt="logo">
    </router-link>
    <div class="sidebar_link">
      <router-link to="/home" class="sidebar_icons" exactActiveClass="active"  >
        <img src="@/assets/icons/home.png" alt="主页" />
      </router-link>
      <router-link to="" class="sidebar_icons" exactActiveClass="active" >
        <img src="@/assets/icons/huishouzhan_huaban.png" alt="回收站">
      </router-link>
      <router-link to="" class="sidebar_icons" exactActiveClass="active" >
        <img src="@/assets/icons/notes.png" alt="灵感小计">
      </router-link>
      <router-link to="/setting" class="sidebar_icons" exactActiveClass="active" >
        <img src="@/assets/icons/shezhi.png" alt="设置">
      </router-link>
      <router-link to="" class="sidebar_icons" exactActiveClass="active" >
        <img src="@/assets/icons/zhanghu.png" alt="账户">
      </router-link>
      <!-- <router-link to="" class="sidebar_icons">
        <img src="@/assets/icons/shezhi.png" alt="小计">
      </router-link> -->
    </div>
    <div class="sidebar_book" v-if="MainStore.state.open">
      <div class="sidebar_book_setting">
        <div>设置</div>
        <div>新建</div>
        <div>展开/收起</div>
      </div>
      <div class="sidebar_book_title">笔记列表</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { useMainStore } from "@/store/index";
const MainStore = useMainStore();
const style = computed(() => {
  return MainStore.state.open ? 'width:200px' : ''
})
</script>

<style lang="scss" scoped>
.sidebar_logo_box {
  display: flex;
  justify-content: start;
  height: 30px;
  padding: 2px 5px;

  >.sidebar_logo {
    width: 30px;
    height: 25px;
  }
}

.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 50px;
  padding: 5px;
  font-size: 14px;
  white-space: nowrap;
  background-color: rgb(236, 236, 236);
  >.sidebar_link {
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    margin-bottom: 20px;
    // border: 1px solid red;

    >.sidebar_icons {
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      border: 1px solid rgba(181, 182, 184, 0.5);
      background-color: rgba(214, 210, 210, 0.8);
      box-shadow: rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;
      
      margin: 5px 0px;
      margin-right: 5px;
      margin-left: 5px;

      >img {
        width: 20px;
        height: 20px;
      }
    }

    >.sidebar_icons:hover {
      border: 1px solid rgba(136, 139, 141, 0.5);
      background-color: rgba(185, 182, 182, 0.8);
      box-shadow: rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;
    }

  }

  >.sidebar_book {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 2px;
    height: 90%;

    >.sidebar_book_setting {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    >.sidebar_book_title {
      overflow: auto;
      display: block;
      width: 100%;
      flex-grow: 1;
    }
  }
}
.active {
  border: 1px solid rgba(136, 139, 141, 0.2);
  background-color: rgba(185, 182, 182, 0.5);
  box-shadow: rgba(60, 64, 67, 0.2) 0px 2px 6px 2px;

}
</style>